---
title: typescript-vue-urql
description: GraphQL Code Generator plugin for Vue.js and urql. It generates Vue.js components and urql hooks. It also generates TypeScript types.
---

import { Callout } from '@theguild/components'
import { PluginApiDocs, PluginHeader } from '@/components/plugin'
import { pluginGetStaticProps } from '@/lib/plugin-get-static-props'
export const getStaticProps = pluginGetStaticProps(__filename, { hasOperationsNote: true })

<Callout type="info">

We now recommend using the `client-preset` package for a **better developer experience** and smaller impact on bundle size.

**Get started on [our "React/Vue" guide](/docs/guides/react-vue).**

</Callout>

<PluginHeader />
<PluginApiDocs />

## Usage Example

For the given input:

```graphql
query Test {
  feed {
    id
    commentCount
    repository {
      full_name
      html_url
      owner {
        avatar_url
      }
    }
  }
}
```

We can use the generated code like this:

```ts
const { data } = useTestQuery(...)
```
